<template>
  <view class="empty-container">
    <image
      class="empty-image"
      :src="image || defaultImage"
      mode="aspectFit"
    ></image>
    <text class="empty-text">{{ text || defaultText }}</text>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 空状态图片
  image: {
    type: String,
    default: "",
  },
  // 空状态文字
  text: {
    type: String,
    default: "",
  },
});

// 默认图片（使用 base64 编码的简单图标）
const defaultImage = computed(
  () =>
    ""
);

const defaultText = computed(() => "暂无数据");
</script>

<style lang="scss" scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  width: 100%;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
  text-align: center;
}
</style>
